//操作符号的类
const pokerWidth = (window.innerWidth - 10) / 4;
const operWidth = (window.innerWidth - 2 * pokerWidth) / 3;

const operations = ['+', '-', '×','÷','(',')'];

export default class Operation {
  constructor(context,oper, y) {
    this.context = context;
    this.oper = oper;
    this.x;
    this.y = y;
    this.width;
    this.height;
    this.index = 0;
    this.gameInfo;
    this.initEvent();
    
  }

  initEvent() {

    canvas.addEventListener('touchstart', ((e) => {
      e.preventDefault();

      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;
         //判断触摸点是否在符号的范围内
      if (y < this.y && y > this.y - this.height && x > this.x && x < this.x + this.width) {
        if (this.oper == '(' || this.oper == ')'){
          this.gameInfo.operations[2].oper = '';
            this.gameInfo.operations[3].oper = '';
        } else if (this.oper == ''){
          this.gameInfo.operations[2].oper = '(';
          this.gameInfo.operations[3].oper = ')';
}else{
        this.index = this.index + 1;
        if (this.index > 3){
          this.index = 0;
        }
        this.oper = operations[this.index];
}
        this.gameInfo.render();    
       }
    }).bind(this));
    
  }

  draw(){
    if (this.oper == '+' || this.oper == '-') {

        this.x = 12 + operWidth + pokerWidth;
        // this.y = window.innerHeight / 2 + 190; 120
        this.width = 30;
      this.height = 50;
    } else if (this.oper == '×' || this.oper == '÷'){

        this.x = 12 + operWidth + pokerWidth;
        // this.y = window.innerHeight / 2 + 190 + 10; 120
        this.width = 30;
      this.height = 50;
    } else if (this.oper == '('){
      this.width = 50;
        this.x = pokerWidth * 0 + 2;
        this.y = window.innerHeight / 2 + 188;
      this.height = 100;
    } else if (this.oper == ')'){
      this.width = 50;
        this.x = operWidth * 3 + pokerWidth * 1.5;
        this.y = window.innerHeight / 2 + 190;
      this.height = 100;
    }
    this.context.fillStyle = "#15bd33";
    this.context.font = "110px Arial";
    this.context.fillText(
      this.oper,
      this.x, 
      this.y,
      this.width,
    );
  }
}